<template>
	<view class="wanl-order-list">
		<view class="navbar">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" style="height: calc(100% - 80rpx)" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tag, key) in navList" :key="tag.id">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<wanl-empty text="没有找到任何订单" v-if="tag.loaded === true && tag.orderList.length === 0"/>
					<!-- 订单列表 -->
					<view v-else style="height: 80rpx;margin: 20rpx;">
						<checkbox-group  @change="change"  style="line-height: 80rpx;margin-left: 30rpx;float: left;">
								<checkbox class="orange" :class="checked == 1 ? 'checked' : ''"  :checked="checked == 1 ? true : false" value="1" />							
						</checkbox-group>	
						
						<button class="cu-btn round margin-lr-bj wanl-bg-orange" style="float: right;"  @tap="takeQrcode(0)">提货</button>
						<button class="cu-btn round line-black" @tap="$wanlshop.to('/pages/user2/shop/shop')"  style="float: right;" >附近商家</button>	
						
					</view>
					<view v-for="(order, okey) in tag.orderList" :key="order.id" class="order-item radius-bock">
						<view class="head">
							<view class="shop wanl-gray" @tap="onShop(order.shop_id)">
								<text class="wlIcon-dianpu1 wanl-black"></text>
								<text class="wanl-black margin-lr-xs text-30">{{ order.shopname}}</text>
								<text class="wlIcon-fanhuigengduo text-sm">[{{ $wanlshop.timeToDate(order.createtime) }}]</text>
							</view>
							<view class="margin-right-bj text-sm">
								<text class="state" :style="{ color: order.stateTipColor }">{{ order.stateTip }}</text>
								<!-- <text v-if="order.state === 1" class="margin-left-sm wlIcon-lajitong" @tap="deleteOrder(order.id,okey)"></text> -->
							</view>
						</view>
						<!-- 商品 -->
						<view class="goods-box">
							<view class="cu-avatar xl margin-right-bj radius" :style="{backgroundImage: 'url('+$wanlshop.oss(order.image, 70, 70)+')'}"> </view>
							<view class="content margin-right-bj">
								<view class="describe">
									<view class="text-cut-2">
										{{order.title}}
									</view>
<!-- 									<view class="wanl_sku text-min">
										<text class="wanl-gray-dark">{{order.remark}}</text>
									</view> -->
								</view>
								<view class="parameter">						
									<view class="text-min wanl-gray">
										x {{ order.number }}
									</view>							
								</view>
							</view>
						</view>
						<!-- 底部 -->
						<view class="price-box text-sm flex" v-if="order.state == 1">					      
							<view>可取货：<text>{{ (order.pre_delivertime <= Math.floor(Date.now()/1000))?'是':$wanlshop.timeFormat(order.pre_delivertime) }}</text></view>
						</view>
			
						<view class="action-box padding-bottom-bj">						
							<checkbox-group v-if="order.state == 1 &&  (order.pre_delivertime <= Math.floor(Date.now()/1000))" :class="checked == 1 ? 'shake-horizontal' : ''" class="auth-clause" @change="e => CheckboxChange(order.id,okey,e)"  style="position: absolute;left: 0;bottom: 20rpx;">
								<checkbox class="orange" :class="order.checked == 1 ? 'checked' : ''"  :checked="order.checked == 1 ? true : false" value="1" />							
							</checkbox-group>
							<button class="cu-btn round line-black" @tap="toChat(order.shop_id)">联系商家</button>		
							<button class="cu-btn round margin-lr-bj wanl-bg-orange"  v-if="order.state == 1 &&  (order.pre_delivertime <= Math.floor(Date.now()/1000))"  @tap="takeQrcode(order.id)">提货</button>
						</view>
				
					</view>
					<uni-load-more :status="tag.loadingType" :content-text="contentText"/>
					<view class="edgeInsetBottom"></view> 
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>

export default {
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					
					state: 0,
					text: '全部',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
				
					state: 1,
					text: '待提货',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
					
					state: 2,
					text: '已提货',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				},
				{
					
					state: 3,
					text: '已取消',
					loadingType: 'more',
					current_page: 1,
					orderList: []
				}
			],
			contentText: {
				contentdown: ' ',
				contentrefresh: '正在加载...',
				contentnomore: ''
			},
			checked:0
		};
	},
	onLoad(options) {
		this.tabCurrentIndex = +options.state;
		// #ifndef MP
		this.loadData();
		// #endif
		// #ifdef MP
		if (options.state == 0) {
			this.loadData();
		}
		// #endif
	},
	methods: {
		//获取订单列表
		async loadData(source) {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			//判断是否最后一页
			if (navItem.loadingType == 'noMore') {
				return;
			}
			//tab切换只有第一次需要加载数据
			if (source === 'tabChange' && navItem.loaded === true) {
				return;
			}
			//防止重复加载
			if (navItem.loadingType === 'loading') {
				return;
			}
			navItem.loadingType = 'loading';
			// 获取列表
			await uni.request({
				url: '/wanlshop/ddporder/getPreOrderList2',
				data: {
					state: state,
					page: navItem.current_page
				},
				method:'POST',
				success: res => {
					navItem.current_page = res.data.current_page; //当前页码
					if (res.data.last_page === res.data.current_page) {
						navItem.loadingType = 'noMore';
					} else {
						navItem.loadingType = 'more';
						navItem.current_page++;
					}
					let orderList = res.data.data.filter(item => {
						//添加不同状态下订单的表现形式				
						item = Object.assign(item, this.orderStateExp(item.state));						
						
						//演示数据所以自己进行状态筛选
						if (state === 0) {
							//0为全部订单
							return item;
						}
						return item.state === state;
					});
					orderList.forEach(item => {
						navItem.orderList.push(item);
					});
					console.log(navItem);
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true);
				}
			});
		},
		CheckboxChange(id,i,e) {
			 this.navList[this.tabCurrentIndex].orderList[i].checked = Number(e.detail.value['0']);			
			},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		},
		//删除订单
		async deleteOrder(order_id, key) {
			uni.showLoading({
				title: '请稍后'
			});
			await uni.request({
				url: '/wanlshop/order/delOrder',
				method: 'POST',
				data: {
					id: order_id
				},
				success: res => {
					this.navList[this.tabCurrentIndex].orderList.splice(key, 1);
					uni.hideLoading();
				}
			});
		},	


		//订单状态文字和颜色
		orderStateExp(state) {
			let stateTip = '',
				stateTipColor = '#333',
				checked = 0;
			switch (+state) {
				case 1:
					stateTip = '待提货';
					stateTipColor = '#f40';
					break;
				case 2:
					stateTip = '已提货';
					break;		
				//更多自定义
			}
			return {
				checked,
				stateTip,
				stateTipColor
			};
		},
		change(e){			
			if(e.detail.value == 1){
				this.checked = 1;
				this.navList[this.tabCurrentIndex].orderList.filter(item => {
				        item.checked =1;  						
						return item;					
					});
			}else{
				this.checked = 0;
				this.navList[this.tabCurrentIndex].orderList.filter(item => {
				        item.checked =0;  						
						return item;					
					});
			}
			
		},
		takeQrcode(id){
			let text= []
			if(id == 0){
				this.navList[this.tabCurrentIndex].orderList. forEach(item => {
				        if(item.state == 1 && item.checked == 1)text.push(item.id);					
				});
				if(text.length == 0){					
					this.$wanlshop.msg('未选择任何订单！');return false;	
				}	
			}else{
				text.push(id);	
			}
			console.log(text.join('-'));			
			text = 'DDGTH'+this.$wanlshop.encrypt(text.join('-'));
			text = text.replace(/\+/g,'%2B');
			this.$wanlshop.auth('/pages/user2/qrcode/takeqrcode?text='+text);
		}
		 
	
	}
};
</script>

<style>
page {
	height: 100%;
}
</style>
